<template>
  <div v-loading="loading">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="dataForm">
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('名称')" prop="btnName">
            <el-input v-model="form.btnName" :placeholder="$t('按钮名称')" show-word-limit maxlength="50" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('编码')" prop="btnCode">
            <el-input v-model="form.btnCode" :placeholder="$t('按钮编码')" show-word-limit maxlength="50" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('按钮样式')" prop="btnClassIfy">
            <el-select v-model="form.btnClassIfy" multiple>
              <el-option v-for="item in btnClassIfyOption" :key="item.value" :label="item.title" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('按钮类型')" prop="btnColor">
            <el-select v-model="form.btnColor">
              <el-option v-for="item in btnColorOption" :key="item.value" :label="item.title" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('按钮位置')" prop="btnPosition">
            <el-select v-model="form.btnPosition">
              <el-option v-for="item in btnPositionOption" :key="item.value" :label="item.title" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('按钮大小')" prop="btnSize">
            <el-select v-model="form.btnSize">
              <el-option v-for="item in btnSizeOption" :key="item.value" :label="item.title" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('按钮图标')" prop="btnIcon">
            <el-input v-model="form.btnIcon" :placeholder="$t('按钮图标')" show-word-limit maxlength="50" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('显示内容')" prop="btnHandlerMode">
            <el-radio-group v-model="form.btnHandlerMode">
              <el-radio-button label="Y">是</el-radio-button>
              <el-radio-button label="N">否</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <!-- <el-input v-model="form.extContent" :placeholder="$t('引用数据')" /> -->
        <!-- <el-col :span="12">
          <el-form-item :label="$t('引用数据')">
            <el-button icon="el-icon-plus" @click="quoteData()">添加引用数据</el-button>
          </el-form-item>
        </el-col> -->
        <el-col :span="12">
          <el-form-item :label="$t('显示条件')" prop="btnDisplay">
            <!-- <el-input v-model="form.btnDisplay" :placeholder="$t('显示条件')" /> -->
            <condition ref="condition" :data-id="head.id" />
          </el-form-item>
        </el-col>
      </el-row>
      <div class="area-header">
        <span class="area-header-title">页面显示字段</span>
      </div>
      <el-row :gutter="10" class="mb8">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="addHandle">{{ $t('新增') }}</el-button>
      <!-- <el-button size="small" type="danger" :disabled="btnDis" icon="el-icon-minus" @click="deleteHandle">删除</el-button> -->
      </el-row>
      <el-table :data="fieldData" tooltip-effect="dark" max-height="500px" @selection-change="selectionChangeHandle">
        <el-table-column label="#" align="center" width="60">
          <template slot-scope="scope">
            <el-button plain size="mini" circle icon="el-icon-minus" @click="deleteHandle(scope.$index)" />
          </template>
        </el-table-column>
        <el-table-column label="配置表名" align="center">
          <template slot-scope="scope">
            <el-select v-model="scope.row.tableName" filterable @change="getFieldName(scope.row)">
              <el-option v-for="item in tableNameOption" :key="item" :label="item" :value="item" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="字段备注" align="center">
          <template slot-scope="scope">
            <el-select v-model="scope.row.fieldId">
              <el-option v-for="item in scope.row.fieldOption" :key="item.id" :label="item.dbFieldTxt" :value="item.id" />
            </el-select>
          </template>
        </el-table-column>
      </el-table>

    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right">
      <!--保存 取消按钮-->
      <save-btn has-permi="system:btn" />
    </div>
  </div>
</template>

<script>
import {
  saveOnlCgformHeadBtn,
  getOnlCgformHeadBtn,
  getFieldListByHeadId
} from '@/api/system/desform/data/onlCgformHeadBtn'
import {
  mapState
} from 'vuex'
import condition from '@/components/desform/online/condition.vue'

const effectOption = [{
    title: '新增',
    value: 'add'
  },
  {
    title: '查看',
    value: 'see'
  }
]
const btnHandlerModeOption = [{
    title: '是',
    value: 'Y'
  },
  {
    title: '否',
    value: 'N'
  }
]
const btnPositionOption = [{
    title: '列表页上方',
    value: 'list_top'
  },
  {
    title: '列表页行右侧',
    value: 'list_right'
  }
]
const btnClassIfyOption = [{
    title: '默认',
    value: 'normal'
  }, // 这个value自定义的 elementui 并没有这个属性
  {
    title: '朴素',
    value: 'plain'
  },
  {
    title: '圆角',
    value: 'round'
  },
  {
    title: '圆形',
    value: 'circle'
  }
]
const btnColorOption = [{
    title: '默认',
    value: 'normal'
  }, // 这个value自定义的 elementui 并没有这个属性
  {
    title: '主要',
    value: 'primary'
  },
  {
    title: '成功',
    value: 'success'
  },
  {
    title: '信息',
    value: 'info'
  },
  {
    title: '警告',
    value: 'warning'
  },
  {
    title: '危险',
    value: 'danger'
  },
  {
    title: '文本',
    value: 'text'
  }
]
const btnSizeOption = [{
    title: '默认',
    value: 'normal'
  },
  {
    title: '中等',
    value: 'medium'
  },
  {
    title: '小型',
    value: 'small'
  },
  {
    title: '超小',
    value: 'mini'
  }
]
const commonPageOptions = [{
    title: '文本框',
    value: 'text'
  },
  {
    title: '多行文本',
    value: 'textarea'
  },
  {
    title: '密码',
    value: 'password'
  },
  {
    title: '下拉框',
    value: 'list'
  },
  {
    title: '多选框',
    value: 'choose'
  },
  {
    title: '单选框',
    value: 'radio'
  },
  {
    title: '日期',
    value: 'date'
  },
  {
    title: '时间',
    value: 'time'
  },
  {
    title: '用户',
    value: 'user'
  },
  {
    title: '部门',
    value: 'dept'
  },
  {
    title: '金额 (单位:元)',
    value: 'money'
  },
  {
    title: '金额 (单位:万)',
    value: 'moneyThousand'
  },
  {
    title: '数值',
    value: 'number'
  },
  {
    title: '搜索',
    value: 'search_company'
  },
  {
    title: '搜索项目品牌&投资机构',
    value: 'search_invest'
  }
]
export default {
  components: {
    condition
  },
  data() {
    return {
      btnHandlerModeOption: btnHandlerModeOption,
      btnPositionOption: btnPositionOption,
      btnClassIfyOption: btnClassIfyOption,
      controlOption: commonPageOptions,
      btnSizeOption: btnSizeOption,
      btnColorOption: btnColorOption,
      effectOption: effectOption,
      quoteForm: {}, // 引用属性对象
      // 表单参数
      form: {
        fieldData: []
      },
      // 遮罩层
      loading: false,
      refOpen: false,
      // 表单校验
      rules: {
        btnName: [{
          required: true,
          message: '请输入按钮名称',
          trigger: 'blur'
        }],
        btnCode: [{
          required: true,
          message: '请输入按钮编码',
          trigger: 'blur'
        }],
        btnClassIfy: [{
          required: true,
          message: '请选择按钮样式',
          trigger: 'blur'
        }],
        btnPosition: [{
          required: true,
          message: '请选择按钮位置',
          trigger: 'blur'
        }],
        btnHandlerMode: [{
          required: true,
          message: '请选择显示内容',
          trigger: 'blur'
        }],
        btnSize: [{
          required: true,
          message: '请选择',
          trigger: 'blur'
        }],
        btnColor: [{
          required: true,
          message: '请选择',
          trigger: 'blur'
        }]
      },
      fieldData: [], // 关联的字段关系
      warpData: {}, // 返回数据
      tableNameOption: [],
      fieldOption: [],
      btnDis: true,
      multipleTable: []
    }
  },
  computed: {
    ...mapState('dbAbout', ['head'])

  },
  created() {
    this.getFieldList()
  },
  methods: {
    // 初始化数据
    init(data) {
      this.loading = true
      if (data != null && data.id !== undefined) {
        getOnlCgformHeadBtn(data.id).then(response => {
          this.form = response.data
          this.form.btnClassIfy = this.form.btnClassIfy.split(',')
          this.fieldData = response.data.fieldData
          this.fieldData.map(e => {
            e.fieldOption = this.warpData[e.tableName]
          })
          this.$refs.condition.domains = JSON.parse(this.form.btnDisplay)
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      } else {
        this.reset()
        this.fieldData = []
        this.$refs.condition.domains = [{}]
        this.loading = false
      }
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        btnName: undefined,
        btnCode: `btn_${this.btnRand()}`,
        btnIcon: undefined,
        btnClassIfy: undefined,
        btnPosition: undefined,
        btnDisplay: undefined,
        btnHandlerMode: 'Y',
        headId: undefined,
        extContent: undefined,
        textMode: 'N'
      }
      this.resetForm('form')
    },
    // 取消按钮
    cancel() {
      this.$parent.$parent.formOpen = false
      this.$parent.$parent.reset()
    },
    // 关闭form页面
    closeForm() {
      // 关闭form页面遮罩层
      this.loading = false
      // 关闭form页面
      if (this.$parent.$parent.formOpen !== undefined) {
        this.$parent.$parent.formOpen = false
      }
      // 刷新list页面
      if (this.$parent.$parent.getList !== undefined) {
        this.$parent.$parent.getList()
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.loading = true
          this.form.headId = this.head.id
          this.form.fieldData = this.fieldData
          const submitData = Object.assign({}, this.form)
          submitData.btnDisplay = JSON.stringify(this.$refs.condition.domains)
          submitData.btnClassIfy = submitData.btnClassIfy.toString()
          saveOnlCgformHeadBtn(submitData).then(response => {
            if (response.code === 200) {
              this.msgSuccess(this.$t('保存成功'))
              this.closeForm()
            } else {
              this.msgError(response.msg)
            }
            this.loading = false
          })
        } else {
          this.locationError(document)
        }
      }).catch(() => {
        this.loading = false
      })
    },
    getFieldList() {
      getFieldListByHeadId(this.head.id).then(res => {
        this.warpData = res.data
        Object.keys(this.warpData).map((key) => {
          this.tableNameOption.push(key)
        })
      })
    },
    getFieldName(row) {
      row.fieldOption = this.warpData[row.tableName]
    },
    addHandle() {
      this.fieldData.push({})
    },
    deleteHandle(index) {
      this.fieldData.splice(index, 1)
    },
    selectionChangeHandle(val) {
      this.multipleTable = val
      this.btnDis = !(val.length > 0)
    },
    doOper() {
      const domains = this.$refs.condition.domains
      if (!domains) {
        return ''
      }
      let domin = ''
      domains.map((d, index) => {
        domin += d.eField + d.eOper + d.eCondi
        if (index !== domains.length - 1) {
          domin += '&&'
        }
      })
      return domin
    },
    btnRand() {
      var t = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
      var a = t.length
      var n = ''
      for (let i = 0; i < 10; i++) n += t.charAt(Math.floor(Math.random() * a))
      return n
    },
    quoteData() { // 引用数据
          this.refOpen = true
    }
  }
}
</script>
